{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px{width: 80px;}
	.el-upload-list{width: 30%;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

  <el-form-item label="名称" prop="title">
    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
  </el-form-item>

  <el-form-item label="提示" prop="tips">
    <el-input v-model="form.tips" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
  </el-form-item>

  <el-form-item label="图片路径" prop="path">
    <el-input v-model="form.path" class="col-12 col-sm-6 pl-0 pr-0" placeholder="使用上传功能上传图片或直接填入图片路径"></el-input>
  </el-form-item>

  <el-form-item label="上传" prop="path">
	  <el-image
	  	v-if="imgUrl" 
	  	class="mw-200px mh-200px"
	    :src="imgUrl"
	    :preview-src-list="[imgUrl]">
	  </el-image>
  	  <el-upload
		  action="/uploadFiles"
		  name="file"
		  ref="upload"
		  :data="{path:'posters/image'}"
		  accept="image/*"
		  show-file-list
		  :limit="1"
		  :on-success="handleFilesSuccess"
		  :on-error="handleFilesError"
		  :on-remove="handleFilesRemove"
		  :auto-upload="false">
			  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <el-button size="small" class="mr-3" type="success" @click="submitUpload">上传</el-button>
			  <div slot="tip" class="el-upload__tip">文件不超过5M</div>
	  </el-upload>
  </el-form-item>

  <el-form-item label="职位信息坐标">
  	<div class="flex w-25">
	  <div class="px-1">X:</div>
	  <el-form-item label-width="0px" prop="position_x" class="col-2 pl-0 pr-0">
	    <el-input v-model="form.position_x" placeholder="X"></el-input>
	  </el-form-item>
	  <div class="px-1">Y:</div>
	  <el-form-item label-width="0px" prop="position_y" class="col-2 pl-0 pr-0">
	    <el-input v-model="form.position_y" placeholder="Y"></el-input>
	  </el-form-item>
  	</div>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">左上角为起点，单位：像素</p>
  	</small>
  </el-form-item>

  <el-form-item label="二维码尺寸" prop="size">
    <el-input v-model="form.size" class="col-12 col-sm-2 pl-0 pr-0" placeholder="默认：100"></el-input>
  </el-form-item>

  <el-form-item label="排序" prop="sort">
    <el-input v-model="form.sort" class="col-12 col-sm-2 pl-0 pr-0" placeholder="默认：99"></el-input>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">正序，值越小越靠前</p>
  	</small>
  </el-form-item>

  <el-form-item label="状态" prop="status">
    <el-radio-group v-model="form.status">
      <el-radio :label="1">上架[默认]</el-radio>
      <el-radio :label="0">下架</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="类型" prop="is_company">
    <el-radio-group v-model="form.is_company">
      <el-radio :label="0">职位海报[默认]</el-radio>
      <el-radio :label="1">企业海报</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="套餐" prop="level">
    <el-radio-group v-model="form.level">
      <el-radio v-for="(v,index) in vip" :label="v.level">{{v.title}}</el-radio>
    </el-radio-group>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">当前会员等级必须高于“套餐”才能使用</p>
  	</small>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="vip"}
	var vip=[];
	{else/}
	var vip={:json_encode($vip,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var is_edit=false;
	var formData={
				title:'',
				tips:'',
				sort:'',
				path:'',
				is_company:0,
				status:1,
				level:0,
				position_y:'',
				position_x:'',
				size:100,
			};
	{else/}
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			vip:vip,
			form:formData,
			is_edit:is_edit,
        	imgUrl:'',
	        rules: {
	          path: [
	            { required: true, message: '请上传图片', trigger: 'change' },
	          ],
	          status: [
	            { required: true, message: '请选择状态', trigger: 'change' },
	          ],
	          level: [
	            { required: true, message: '请选择套餐', trigger: 'change' },
	          ],
	          position_y: [
	            { required: true, message: '请输入职位信息坐标', trigger: 'blur' },
	          ],
	          position_x: [
	            { required: true, message: '请输入职位信息坐标', trigger: 'blur' },
	          ],
	          size: [
	            { required: true, message: '请输入二维码尺寸', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
			form:{
				handler(val,oldVal){
					if (val.path) {
						this.imgUrl='{:config('web.imgurl')}'+val.path;
					}else{
						this.imgUrl='';
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:{
		    submitUpload() {
		        this.$refs.upload.submit();
		    },
		    handleFilesRemove(){
		    	var _this=this;
				_this.form.path='';
		    },
			handleFilesSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'posters/image'){
							this.form.path=res.data.path;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleFilesError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									_this.$refs.upload.clearFiles();
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}